<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>患者诊治费</title>
    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <div th:replace="common :: #leftmenu"></div>

    <!-- main content start-->
    <div class="main-content"  style="padding-top: 90px;">
        <div class="header-section">
            <div class="form-horizontal" >
                <div class="form-group" style="margin-top: 10px;margin-bottom: 0px;padding-top: 10px;">
                    <label class="control-label col-md-3">结算日期</label>
                    <div class="col-md-4">
                        <div class="input-group input-large custom-date-range">
                            <input type="text" class="form-control dpd1" name="from" id="startTime"
                                   data-date-format="yyyy-mm-dd">
                            <span class="input-group-addon">至</span>
                            <input type="text" class="form-control dpd2" name="to" id="endTime"
                                   data-date-format="yyyy-mm-dd">
                        </div>
                        <span class="help-block">请选择一个结算日期范围</span>
                    </div>
                    <button class="btn btn-primary" onclick="searchData()">查询</button>
                </div>
            </div>

        </div>
        <!--body wrapper start-->
        <div class="wrapper">


            <div th:class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            门诊患者诊治费
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">每门诊人次费用（元）</span>
                                            <h3 id="costPerOutpatient"></h3>
                                        </div>
                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">其中药费（元）</span>
                                            <h3 id="outMedicineCost"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            住院患者诊治费
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="row">

                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">每住院人次费用（元）</span>
                                            <h3 id="costPerInpatient"></h3>
                                        </div>
                                        <div class="col-sm-6 p-states">
                                            <span class="state-title">其中药费（元）</span>
                                            <h3 id="inMedicineCost"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            门诊药费占比
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body" id="pie1" style="height:400px;">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        </div>
                    </section>
                </div>
                <div class="col-sm-6">
                    <section class="panel">
                        <header class="panel-heading">
                            住院药费占比
                            <span class="tools pull-right">
                            <a href="javascript:;" class="fa fa-chevron-down"></a>
                            <a href="javascript:;" class="fa fa-times"></a>
                         </span>
                        </header>
                        <div class="panel-body" id="pie2" style="height:400px;">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        </div>
                    </section>
                </div>

            </div>
            <!--body wrapper end-->


        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<div th:replace="common :: #commonscript"></div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#startTime').val(getDay(-30));
        $('#endTime').val(getDay(0));
        searchData();
    });

    function searchData() {
        let startTime = $('#startTime').val();
        let endTime = $('#endTime').val();
        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/getHospitalIncome",
            data: {"startTime": startTime, "endTime": endTime},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    $('#costPerOutpatient').text(result.costPerOutpatient);
                    $('#outMedicineCost').text(result.outMedicineCost);
                    $('#costPerInpatient').text(result.costPerInpatient);
                    $('#inMedicineCost').text(result.inMedicineCost);

                    let pie1 = echarts.init(document.getElementById('pie1'));
                    let option1 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '费用类型',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {value: result.outMedicineCost.toFixed(2), name: '每门诊人次药费'},
                                    {value: (result.costPerOutpatient - result.outMedicineCost).toFixed(2), name: '其他费用'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    pie1.setOption(option1);
                    let pie2 = echarts.init(document.getElementById('pie2'));
                    let option2 = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '费用类型',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {value: result.inMedicineCost.toFixed(2), name: '每住院人次药费'},
                                    {value: (result.costPerInpatient - result.inMedicineCost).toFixed(2), name: '其他费用'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    pie2.setOption(option2);
                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!" + JSON.parse(errorMsg));

            }
        });//end ajax
    }
</script>
</body>